<template>
  <div>
    <q-card class="my-card">
      <q-card-section>
        <div class="row">
          <div class="col-grow">
            <div class="text-subtitle1">
              {{ value }}
            </div>
            <div class="text-caption">{{ label }}</div>
          </div>
          <div class="iconSize" style="text-align: right">
            <q-icon :size="iconSize" :color="iconColor" :name="icon" />
          </div>
        </div>
      </q-card-section>
    </q-card>
  </div>
</template>

<script>
export default {
  name: "card",
  props: {
    value: {
      type: Number,
      default: 0,
    },
    label: {
      type: String,
      default: "",
    },
    icon: {
      type: String,
      default: "",
    },
    "iconColor": {
      type: String,
      default: "negative",
    },
    "iconSize": {
      type: String,
      default: "28px",
    },
  },
};
</script>

<style scoped>
.my-card {
  width: 200px;
  height: 80px;
}
</style>